<template>
  <div class="form-container">
    <!-- 头部 -->
    <el-row>
      <el-col :span="22" class="state">说明:目前支持学科和关键字条件筛选</el-col>
      <el-col :span="2">
        <el-button
          size="mini"
          type="success"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
        >新增试题</el-button>
      </el-col>
    </el-row>
    <!-- 表单区域 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学科">
        <el-select v-model="formInline.subjectName" placeholder="请选择" @change="subjectNameChange">
          <el-option
            :label="item.subjectName"
            :value="item.id"
            v-for="item in SubjectsList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录">
        <el-select v-model="formInline.directoryName" placeholder="请选择">
          <el-option
            :label="item.directoryName"
            :value="item.id"
            v-for="item in directory"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="formInline.tagName" placeholder="请选择">
          <el-option :label="item.tagName" :value="item.id" v-for="item in tagsList" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="formInline.keyword" placeholder="根据题干搜索"></el-input>
      </el-form-item>
      <el-form-item label="试题类型">
        <el-select v-model="formInline.questionType" placeholder="请选择">
          <el-option label="单选" value="单选"></el-option>
          <el-option label="多选" value="多选"></el-option>
          <el-option label="简答" value="简答"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度">
        <el-select v-model="formInline.difficulty" placeholder="请选择">
          <el-option label="简单" value="简单"></el-option>
          <el-option label="一般" value="一般"></el-option>
          <el-option label="困难" value="困难"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向">
        <el-select v-model="formInline.direction" placeholder="请选择">
          <el-option label="o2o" value="o2o"></el-option>
          <el-option label="外包服务" value="外包服务"></el-option>
          <el-option label="企业服务" value="企业服务"></el-option>
          <el-option label="互联网金融" value="互联网金融"></el-option>
          <el-option label="企业咨询" value="企业咨询"></el-option>
          <el-option label="互联网" value="互联网"></el-option>
          <el-option label="电子商务" value="电子商务"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select v-model="formInline.region" placeholder="请选择">
          <el-option label="超级管理员" value="超级管理员"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input v-model="formInline.remarks"></el-input>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input v-model="formInline.shortName"></el-input>
      </el-form-item>
      <!-- 城市联动 -->
      <el-form-item class="city_select" label="所属市：" prop="status">
        <el-select v-model="formInline.city" placeholder="请选择" @change="getCityAreaList">
          <el-option v-for="(item,index) in cities" :key="index" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="formInline.cityAreaVal" placeholder="请选择">
          <el-option v-for="(item,index) in cityAreaList" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="searchbtn">
        <el-button size="medium" @click="clearForm">清除</el-button>
        <el-button size="medium" type="primary" @click="$emit('searchSubject',formInline)">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getSubjects, getDirectorys, getTags } from '@/api/questions.js'
import { provinces, citys } from '@/assets/citys.js'
export default {
  name: 'FormContainer',
  data() {
    return {
      // form表单  请求参数
      formInline: {
        page: 1,
        pagesize: 10,
        // 学科
        subjectName: '',
        // 二级目录
        directoryName: '',
        // 标签
        tagName: '',
        // 关键字
        keyword: '',
        // 类型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 录入人
        region: '',
        // 城市
        city: '',
        // 区
        cityAreaVal: ''
      },
      // 学科数据
      SubjectsList: {},
      // 二级目录
      directory: {},
      // 标签数据
      tagsList: {},
      // 城市联动
      cityAreaList: [],
      cities: []
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 获取学科数据
    async getSubjectsList() {
      try {
        const { data } = await getSubjects({
          page: 1,
          pagesize: 100000
        })
        // console.log(data)
        this.SubjectsList = data.items
      } catch (err) {
        this.$message.error('获取失败')
      }
    },
    // 获取二级目录和标签
    async subjectNameChange(id) {
      this.getDirect(id)
      this.getTagsList(id)
      this.formInline.directoryName = ''
      this.formInline.tagName = ''
    },
    // 获取二级目录
    async getDirect(id) {
      try {
        const { data } = await getDirectorys({
          page: 1,
          pagesize: 100000,
          subjectID: id
        })
        this.directory = data.items
      } catch (err) {
        this.$message.error('获取二级目录失败')
      }
    },
    // 获取标签
    async getTagsList(id) {
      try {
        const { data } = await getTags({
          page: 1,
          pagesize: 100000,
          subjectId: id
        })
        this.tagsList = data.items
      } catch (err) {
        this.$message.error('获取标签失败')
      }
    },
    // 清空表单
    clearForm() {
      this.formInline = {}
    },
    // // 城市联动 市发生改变
    getCityList() {
      const data = provinces()
      this.cities = data
    },
    // // 城市联动 区发生改变
    getCityAreaList() {
      const data = citys(this.formInline.city)
      this.cityAreaList = data
      this.formInline.cityAreaVal = data[0]
    }
  },
  created() {
    this.getCityList()
    this.getSubjectsList()
  },
  mounted() {}
}
</script>

<style lang='less' scoped>
.form-container {
  .state {
    color: rgb(253, 174, 174);
    font-size: 12px;
  }
  .el-form {
    /deep/.el-form-item {
      margin: 10px 2px;
      .el-form-item__label {
        font-weight: 700;
        width: 80px;
      }
      .el-input__inner {
        height: 30px;
        width: 221px;
      }
    }
    .searchbtn {
      padding-left: 150px;
    }
    .city_select {
      /deep/ .el-input__inner {
        margin-right: 1px;
        width: 110px;
      }
    }
  }
}
</style>
